<script lang="ts" setup>
import { Button, Cell, CellGroup } from 'vant'
import { protectedAction } from '~/utils'
import { user } from '~/api'
import { UserModel } from '~/model';

const router = useRouter()
const user = ref(new UserModel())

function onLogOut() {
  protectedAction(
    () => {
      router.push('/logout')
    },
    '确认退出登陆?',
    0,
  )
}

function onLogIn() {
  router.push('/logout')
}

function onFullScreen() {
  document.body.requestFullscreen()
}
</script>

<template>
  <div>
    <CellGroup mb2>
      <Cell v-if="user.userId" title="登录用户" :value="user.name" />
      <Cell v-else title="未登录" value="" />
    </CellGroup>

    <Button mb2 w-full @click="onFullScreen">
      全屏模式(测试)
    </Button>

    <Button v-if="user.userId" w-full c-red @click="onLogOut">
      退出登录
    </Button>
    <Button v-else w-full c-blue @click="onLogIn">
      登录
    </Button>
  </div>
</template>

<style scoped>

</style>

<route lang="yaml">
meta:
  title: 配置
</route>
